<template>
    <div class="wid" v-loading="loading">
        <div class="block">
            <!-- {{menu_id}} -->
            <el-tree 
                :data="menuList" 
                show-checkbox 
                default-expand-all 
                node-key="nokey" 
                ref="tree" 
                highlight-current 
                :default-checked-keys="menu_id" 
                :props="defaultProps" 
                @check="handleCheckChange">
            </el-tree>
        </div>
        <div class="button">
            <el-button @click="cancel()">取消</el-button>
            <el-button :loading="isBtn" @click="saveRoleMenu"  type="primary">保存</el-button>
        </div>
    </div>
</template>
<script>
let id = 1000;
export default {
    data() {
        return {
            id:0,
            loading: false,  //页面加载
            isBtn: false,    //按钮加载
            menu_id: [],     //权限id组
            menuList: [],   //权限列表
            permissions:[], //
            defaultProps: { //
                children: 'child',
                label: 'title'
            }
        };
    },
    created(){
        let {id} = this.$route.query;
        this.id = Number(id);
        this.getMenu();
    },
    methods: {
        async saveRoleMenu() {//权限保存
            this.isBtn = true;
            let permissions_ids=[],menu_ids=[];
            for(let v of this.menu_id){
                if(typeof v == 'number'){
                    menu_ids.push(v);
                }else {
                    let index = this.permissions.findIndex(v2=>v2.pname==v)
                    permissions_ids.push(this.permissions[index].id)
                }
            }
            console.log(permissions_ids,"_____",menu_ids,"---",this.$refs.tree.getHalfCheckedKeys());
            // return 
            menu_ids = menu_ids.concat(this.$refs.tree.getHalfCheckedKeys())
            let { code } = await this.$Http.allocationMenu({
                position_id: this.id,
                menu_ids:menu_ids.join(','),
                permissions_ids:permissions_ids.join(','),
            })
            this.isBtn = false;
            if (code) {
                this.$message.success('修改成功!');
                this.utils.backPage();
            }
        },
        async getMenu(){
            this.loading = true
            let {code,data} = await this.$Http.getMenu({position_id:this.id});
            this.loading = false;
            if(code){
                this.menuList = this.recursion(data);
                console.log("list", this.menuList);
            }
        },
        recursion(list,prid){
            return list.map(v => {
                if(prid){
                    this.permissions.push({id:v.id,pname:v.name+v.id});
                    v.nokey = v.name+v.id;
                }else{
                    v.nokey=v.id
                }
                if(v.is_select==1){
                    // v.isNum?v.isNum++ :v.isNum=1
                    if(prid){
                        this.menu_id.push(v.nokey)
                        // if(prid.child==v.isNum) 
                    }

                }
                // v.title +=`(${v.nokey})`
                if(v.child&&v.child.length)
                    v.child = this.recursion(v.child)
                else if(v.permissions&&v.permissions.length){
                    v.child = this.recursion(v.permissions,v)
                }else if(v.is_select&&!v.is_check) this.menu_id.push(v.id)
                //  if(!v.is_check) this.menu_id.push(v.id)
                return v;
            });
        },
        cancel() {
            this.utils.backPage();
        },
        handleCheckChange(data, checked, indeterminate) {
            // console.log(data, checked, indeterminate);
            this.menu_id = checked.checkedKeys;
        },
    },
};
</script>

<style lang='scss' scoped>
.wid {
    background: #fff;
    min-height: calc(100vh - 130px);
    border-radius: 12px;
    padding: 20px 20px 0px 120px;
    box-sizing: border-box;
}
.button {
    margin-top: 100px;
    .el-button {
        margin-right: 50px;
    }
}
</style>
